<template>
      <!-- /. ROW  -->
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              添加作业
            </div>
            <div class="panel-body">
              <p>选择作业所属的课程</p>
              <div class="row">
                <div class="col-12">
                  <el-cascader-panel v-model="selectedCurriculum" :options="options"/>
                </div>

              </div>
              <p>作业简介:</p>
              <div class="row">
                <div class="col-12">
                  <div id="editor">
                    <p>Hello World!</p>
                    <p>Some initial <strong>bold</strong> text</p>
                    <p><br></p>
                  </div>
                  <div id="toolbar">
    <span class="ql-formats">
      <select class="ql-font"></select>
      <select class="ql-size"></select>
    </span>
                    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
                    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
                    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
                    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
                    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
                    <span class="ql-formats">
      <button class="ql-direction" value="rtl"></button>
      <select class="ql-align"></select>
    </span>
                    <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
                      <!--      <button class="ql-video"></button>-->
      <button class="ql-formula"></button>
    </span>
                    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
                  </div>
                </div>
              </div>
              <p>开始与结束日期</p>
              <div class="row">
                <div class="block">
                  <el-date-picker
                      v-model="value2"
                      type="datetimerange"
                      :shortcuts="shortcuts"
                      range-separator="To"
                      start-placeholder="Start date"
                      end-placeholder="End date"
                  >
                  </el-date-picker>
                </div>

              </div>
              <p>作业题目</p>
              <div class="row">
                <el-input v-model="homeWorkName" placeholder="Please input" clearable/>
              </div>


              <div class="row">
                <div class="col-12">
                  <el-button type="primary" @click="showselectedCurriculum">提交并选择学生</el-button>
                </div>
              </div>
              <!-- /.row (nested) -->
            </div>
            <!-- /.panel-body -->
          </div>
          <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
      </div>

</template>

<script>
import axios from "axios";
import {QuillDeltaToHtmlConverter} from "quill-delta-to-html";
import {ElMessage} from "element-plus";

export default {
  name: "addHomeWork",
  data() {
    return {
      homeWorkName: '',
      selectedCurriculum: '',
      options: [],
      shortcuts: [
        {
          text: '到下周今天',
          value: () => {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: '到下下周今天',
          value: () => {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7 * 2)
            return [start, end]
          },
        },
        {
          text: '到30天后',
          value: () => {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
      ],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',

    }
  },
  created() {

    axios.post("/api/ListCurriculum").then((res) => {
      this.options = res.data
    })

  },
  mounted() {
    Quill.register('modules/image', true)
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar'
      }
    });
    this.quillIns = quill
  },
  methods: {
    showselectedCurriculum() {
      var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
      var deltaOps = this.quillIns.getContents().ops
      var cfg = {};
      var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
      var html = converter.convert();
      var data = {
        homeWorkName: this.homeWorkName,
        endTime: this.value2[1],
        startTime: this.value2[0],
        homeWorkDescribe: html,
        curriculumId: this.selectedCurriculum[this.selectedCurriculum.length - 1]
      }
      axios.post("/api/teacher/setNewHomeWork", data).then((res) => {
        if (res.status === 200) {
          ElMessage.success({message: '成功'})
          this.$ses.pushByNameResId('ChangeHomeWorksStuList',{'homeworkId':res.data.ID})
          // this.$router.push({name:'ChangeHomeWorksStuList',params:{homeworkId:res.data.ID}})
        }
      })
    },
  }
}
</script>

<style scoped>

</style>